<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"
%>
<%@ page language="java" import="java.text.SimpleDateFormat" %>
<%@page import="com.mall.model.User" %>
<!DOCTYPE HTML>
<html>
  <head>
     <title>
      		  账户设置
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css"  />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
 <script src="${pageContext.request.contextPath}/css/unslider.min.js"></script>
<script src="${pageContext.request.contextPath}/js/userCenterOrder.js"></script>
<body style="width:1366px">
	<div style="background: #F5F5F5;height:40px;padding-top: 8px" id="topdiv">
		<div style="margin-left:100px;">
			您好!<span style="color:#CD4F39">
			${user.name}
			</span>
		</div>
		<div style="margin-left:750px;">
			<a href="${pageContext.request.contextPath}">商城首页 <span class="fa fa-home" style="color:#FF7F00">
			</span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a href="${pageContext.request.contextPath}/user/center.action">个人中心 
			<span class="fa fa-cog"
				style="color:#FF7F00"></span>
			</a>
		</div>
		<div style="margin-left:50px;">
			<a href="${pageContext.request.contextPath}/user/outLogin.action">退出登录<span class="fa fa-user-circle-o"
				style="color:#FF7F00"></span>
			</a>
		</div>
	</div>
	<div id="toplogo" style="border-bottom:2px solid #FF3030;height:102px;">
		<div style="margin-left: 200px;float: left">
			<a href="${pageContext.request.contextPath}">
			<img src="${pageContext.request.contextPath}/img/juninglogo.jpg"
				width="100px" height="100px" />
			</a>
		</div>
		<div style="float: left;margin-left:500px; ">
			<img src="${pageContext.request.contextPath}/img/userCenter.png" >
		</div>
	</div>
	<div>
			<div class="mainLeft" style="float: left;">
				<ul style="list-style: none;">
					<li>
					<a  href="${pageContext.request.contextPath}/CartController/listCartByUser.action">我的购物车</a>
					</li>
					<li  >
					<a  href="${pageContext.request.contextPath}/OrderController/allOrderByUserId.action">
					我的订单
					</a>
					</li>
					<li>
					<a  href="${pageContext.request.contextPath}/AddressController/listAddress.action" >
					我的地址</a>
					</li>
					<li>
					<a  href="${pageContext.request.contextPath}/user/center.action" style="color:#FF6347;font-size:16px">
					账户设置</a>
					</li>
				</ul>
			</div>
			</div>
			<div  style="float: left;border:1px solid #DBDBDB;margin: 40px 0 0 100px;min-height: 500px;width: 950px">
				<div style="height:40px;background:#EBEBEB;width:100%">
					<div class="titlebtns" style="background: #fff" onclick="return divoff(this,1)">
					个人资料</div>	
					<div class="titlebtns" onclick="return divoff(this,2)">
					修改密码</div>
				</div>
				<div class="personaldiv" id="personaldiv">
					<div style="margin:30px 0 0 80px">
						<h4>${center.name }的基本资料</h4>
						<div style="margin:20px 0 10px 0;position: relative;">
						<span>当前头像:</span>
						<img style="margin-left:20px;width:100px;height:100px;border:2px solid #E3E3E3" src="${pageContext.request.contextPath}/file/userimg/${center.img}">
						<input onchange="return uploadImg(this)" type="file" style="opacity:0;cursor:pointer;left:90px;top:10;width:90px;height:90px;display:inline-block;position:absolute;">
						<input type="hidden" id="img">
						</div>
						<span id="loading" style="display:none;position:fixed;left:700px;top:250px"
						class="fa fa-circle-o-notch fa-spin fa-2x"></span>
						<br>
						<span>您的姓名:&nbsp;&nbsp;</span>
						<input type="text"  value="${center.name}" id="name" style="border:1px solid #DEDEDE;width:350px">
						<br><br><br>
						<span>您的性别:&nbsp;&nbsp;</span>
						<c:if test="${center.gender==0}">
						<label>
						男
						<input class="genders" type="radio" name="gender"  value="0" checked="checked">
						</label>
						<label style="margin-left: 20px">
						女
						<input class="genders" type="radio" name="gender" value="1">
						</label>
						</c:if>
						<c:if test="${center.gender==1 }">
						<label>
						男
						<input class="genders" type="radio" name="gender"  value="0" >
						</label>
						<label style="margin-left: 20px">
						女
						<input class="genders" type="radio" name="gender" value="1" checked="checked">
						</label>
						</c:if>
						<br><br><br>
						<span>您的生日:&nbsp;&nbsp;</span>
						<%
							/* 这里我直接用了java代码来格式化日期 */
							User user=(User)request.getAttribute("center");
								String sdate=null;
								if(user!=null&&user.getBirthday()!=null&&!user.getBirthday().equals("")){
								Date date=user.getBirthday();
								SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
										sdate=sdf.format(date);
								}
						 %>
						<input type="hidden" value="<%=sdate%>" id="birthday">
						<select id="yyyy" >
							
						</select>
						<select id="mm">
							
						</select>
						<select id="dd">
							
						</select>
						<br><br><br>
						<span>您的爱好:&nbsp;&nbsp;</span>
				<textarea id="userlike" rows="2" cols="50" style="resize : none;">${center.userlike}</textarea>
						<br> <br> <br>
						<div style="width:100px;margin:0 0 0 350px">
							<button  id="update" onclick="return update()">更新</button>
						</div>
					</div>
				</div>
				<div id="updatepass" style="display:none;width: 600px;margin:60px 0 0 300px">
						<label style="color:#A6A6A6">请输入原始密码</label>
						<br>
						<input type="password" id="pass1">
						<br><br>
						<label>请输入新密码</label>
						<br>
						<input type="password" id="pass2">
						<br><br>
						<label>确认您的密码</label>
						<br>
						<input type="password" id="pass3">
						<br><br><br>
						<span style="display:none;color:red" id="pwderror"></span>
						<br>
						<button id="updatepassbtn" onclick="return updatepwd()" >确认修改</button>
				</div>
			</div>
				<input type="hidden" value="${pageContext.request.contextPath}/" id="path">
				<input type="hidden" value="${error}" id="error">
	</body>
	<script type="text/javascript">
	/* 日期选择 */
	$(document).ready(function(e){
			var y=$("#yyyy");
			var m=$("#mm");
			var d=$("#dd");
			/*获取到格式化的时间用split方法分割然后逐一比较,实现默认选择用户自己的生日  */
			var brithday=$("#birthday").val();
			if(brithday!=null&&brithday!=""){
				var arr=brithday.split("-");
			for(var i=2017;i>=1940;i--){
				if(arr[0]==i){
				y.append("<option selected='selected' value='"+i+"'>"+i+"年</option>");
				}else{
				y.append("<option value='"+i+"'>"+i+"年</option>");
				}
			}
			foreach(1,31,d,function(t,i){
				if(arr[2]==i){
				t.append("<option selected='selected' value='"+i+"'>"+i+"日</option>");
				}else{
				t.append("<option  value='"+i+"'>"+i+"日</option>");
				}
			});
			foreach(1,12,m,function(t,i){
				if(arr[1]==i){
				t.append("<option selected='selected' value='"+i+"'>"+i+"月</option>");
				}else{
				t.append("<option  value='"+i+"'>"+i+"月</option>");
				}
			});
			/*如果为空则不设置默认  */
			}else{
			for(var i=2017;i>=1940;i--){
				y.append("<option value='"+i+"'>"+i+"年</option>");
			}
			foreach(1,31,d,function(t,i){
				t.append("<option value='"+i+"'>"+i+"日</option>")
			});
			foreach(1,12,m,function(t,i){
				t.append("<option value='"+i+"'>"+i+"月</option>")
			});
			}
			/*监听月份和年份改变的事件,针对2月进行天数的修改 */
			m.change(function(){
				var mm=m.val();
				if(mm>7&&(mm%2)!=0){
				foreach(1,30,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>");
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>");
				}
			});
				return false;
				}else if(mm<7&&(mm%2)==0&&mm!=2)
				{foreach(1,30,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
				return false;
				}else{
					foreach(1,31,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
				}
				var yyyy=y.val();
				var byf=String(yyyy/4).indexOf('.');
				if(mm==2){
					if((yyyy%100)==0&&(yyyy%400)==0){
						foreach(1,29,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
					return false;
					}else if(byf<0){
							foreach(1,29,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
				}else{
						foreach(1,28,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
				}
				}
			});
		y.change(function(){
				var yyyy=y.val();
				var mm=m.val();
				var byf=String(yyyy/4).indexOf('.');
				if(mm==2){
					if((yyyy%100)==0&&(yyyy%400)==0){
						foreach(1,29,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
					return false;
					}else if(byf<0){
							foreach(1,29,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
				}else{
						foreach(1,28,d,function(t,i){
				if(i==1){
				t.html("<option value='"+i+"'>"+i+"日</option>")
				}else{
				t.append("<option value='"+i+"'>"+i+"日</option>")
				}
				});
				}
				}
		});
	});
		/*封装for  */
		function foreach(l,e,d,callback){
				for(l;l<=e;l++){
					callback(d,l);
				}
		}
/* 日期选择end */
		function uploadImg(data){
		var file = $(data).val();
			if (!/.(gif|jpg|jpeg|png|GIF|JPG|png)$/.test(file)) {
				alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
				return false;
			}
			$("#loading").css("display","inline-block");
			/* 创建表单对象 */
			var formData = new FormData();
				/* 添加文件 */
			formData.append("img", $(data)[0].files[0]);
			$.ajax({
				url :"${pageContext.request.contextPath}/user/uploadImg.action",
				type : 'POST',
				data : formData,
				processData : false,
				contentType : false,
				dataType : "json",
				success : function(r) {
						if(r.img==null||r.img==""){
						alert("修改失败");
						$("#loading").css("display","none");
						return false;
						}
						$("#img").val(r.img);
						$(data).prev().attr("src","/mall/file/userimg/"+r.img);	
						$("#loading").css("display","none");
				},
				error : function(responseStr) { 
					alert("上传失败,请重新上传!");
					$("#loading").css("display","none");
					} 
					
				});
		}
		function divoff(data,num){
			if(num==1){
			$("#personaldiv").css("display","block");
			$("#updatepass").css("display","none");
			$(data).css("background","#fff");
			$(data).next().css("background","none");
			}else{
			$("#personaldiv").css("display","none");
			$("#updatepass").css("display","block");
			$(data).css("background","#fff");
			$(data).prev().css("background","none");
			}	
			return false;
		}
		/* 修改资料 */
		function update(){
			if(confirm("是否要修改信息?")){
			var name=$("#name").val();
			var img=$("#img").val();
			var gender;
			var yyyy=$("#yyyy").val();
			var mm=$("#mm").val();
			var dd=$("#dd").val();
			var brithday=yyyy+"-"+mm+"-"+dd
			var userlike=$("#userlike").html();
			$(".genders").each(function(){
			if($(this).attr("checked")=='checked'){
				gender=$(this).val();
			}
			});
			var path=$("#path").val();
			var val={"name":name,'userlike':userlike,"brithString":brithday,"gender":gender,"img":img};
			$.post(path+"user/update.action",val,function(e){
				if(e==0){
				alert("更新失败,请稍后再试!");
				}else{
				location.reload();
				}
			});
			}
			return false;
		}
		/* 修改密码 */
		function updatepwd(){
			/*正则表达式验证密码  */
			var pwd1=$("#pass1").val();
			var pwd2=$("#pass2").val();
			var pwd3=$("#pass3").val();
			var t=/[a-z]+/;
			var t2=/[0-9]+/;
			var t3=/[A-Z]+/
			if(pwd2!=pwd3){
				$("#pwderror").html("您两次输入的密码不一致!");
				$("#pwderror").css("display","inline")
				return false;
			}else if(pwd3.length<8||pwd3.length>20){
				$("#pwderror").html("密码8-20位,可包含数字和字母!");
				$("#pwderror").css("display","inline");
				return false;
			}else if(!t.test(pwd3)||!t2.test(pwd3)||!t3.test(pwd3)){
				$("#pwderror").html("密码需含数字和字母大小写!");
				$("#pwderror").css("display","inline");
				return false;
			}
			/*验证结束  */
			if(pwd1==null||pwd1==""){
				$("#pwderror").html("密码不能为空!");
				$("#pwderror").css("display","inline");
				return false;
			}
			var path=$("#path").val();
			$.post(path+"user/updatePwd.action",{"pwd1":pwd1,"pwd2":pwd3},function(e){
					if(e.result==1){
					alert("修改成功");
					location.reload();
					}else if(e.result==3){
					window.location.href=path+"login.jsp"
					}else{
					$("#pwderror").html(e.error);
					$("#pwderror").css("display","inline");	
					}
			});
			return false;
		}
		function phonenumtest(id){
				
		}
	</script>
	<style type="text/css">
	#updatepassbtn{
	width: 100px;height:35px;border:2px solid;border-radius: 5px;color:#EE6A50;font-size:16px;
	margin-left: 250px;background: #fff;
	}
	#updatepass input{
		width: 350px;border:1px solid #BDBDBD;height:35px
	}
	select{
	border:1px solid #D4D4D4;
	}
	#update{
	background:#EE7942;border:2px solid #EE9572;border-radius:3px;
	width:65px;height:30px;font-size:12px;color:#fff;
	}
	#update:hover{
	background:#EE6A50;
	}
	.personaldiv span{
	color:#616161;
	}
.titlebtns{
	float:left;text-align: center;padding-top: 10px;width:100px;
	height:100%;
	}
	.titlebtns:hover{
	cursor: pointer;
	}
	.address{
		height:150px;width: 850px;border:1px solid #9E9E9E;margin:20px 0 0 50px;
	}
	a{
	color:#191970;font-weight:600
	}
	a:hover{
	color:#4F4F4F;text-decoration:none;cursor: pointer; 
	}
	.mainLeft ul{
		margin:50px 0 0 70px;
		}
	.mainLeft li{
			margin:20px 0 0 0;width: 100px;height: 40px;text-align: center;
			}
	.mainLeft li a{
			color:#262626;
	}
	.mainLeft li a:hover{
			color:#FF6347;text-decoration:none;font-size: 16px; 
			}
	.mainLeft li:hover{
			cursor: pointer;
			}
	#topdiv div{
	float:left;
	}
	</style>
	</html>